<template>
  <div>
    <filtrate></filtrate>
    <div class="box">
      <!-- v-for="item in dingdanguanli" :key="item.index" -->
      <el-table :data="dingdanguanli" style="width: 100%">
        <el-table-column type="index" label="UID"> </el-table-column>
        <!-- <el-table-column prop="dingdanfenyong" label="UID" width="180" align="center">
      </el-table-column> -->
        <el-table-column label="头像" width="140" align="center">
          <el-avatar>202</el-avatar>
        </el-table-column>
        <el-table-column
          prop="maijiayonghuming"
          label="用户名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="maijiazhanghao"
          label="联系方式"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="maijiaweixin"
          label="微信号"
          width="170"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="maijiagoumaishijian"
          label="注册时间"
          width="190"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shijian"
          label="登入时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="dingdanshuliang"
          label="购买件数"
          width="120"
          align="center"
        >
        </el-table-column
        >enter">
        <el-table-column prop="jine" label="消费金额"> </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
        :total="50"
        :page-size="10"
        @current-change="currentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import filtrate from "../../components/lef_nav/filtrate.vue";
import { mapActions } from "vuex";
// import { mapActions } from "vuex";
import { GET_USERS } from "../../store/actionType";
// import { mapActions } from "vuex";
export default {
  data() {
    return {
      dingdanguanli: [],
    };
  },
  components: { filtrate },
  mounted() {
    // this[GET_USERS](1);
    this.$axios
      .get("http://10.0.31.157:8888/dingdanguanli?name=1&id=0")
      .then((res) => {
        // this.dingdanguanli=res
        let data = res.data;
        // console.log(data); console.log(data[0]);
        this.dingdanguanli = data;

        // console.log(this.dingdanguanli);
      });
  },
  methods: {
    ...mapActions("user", [GET_USERS]),
    currentChange(page) {
      // console.log(this.$axios);
      this.$axios
        .get(`http://10.0.31.157:8888/dingdanguanli?name=1&id=${page - 1}`)
        .then((res) => {
          let data = res.data;
          // console.log(data);
          this.dingdanguanli = data;
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.box {
 box-shadow: #999 0px 0px 20px;
}
// 字体颜色在app.vue 下的cell中修改
</style>